<template>
  <div class="home-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="statistics">
      <el-col
        :xs="24"
        :sm="12"
        :md="6"
        :lg="6"
        :xl="6"
        v-for="stat in statistics"
        :key="stat.title"
      >
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div class="stat-item">
            <div class="stat-icon" :style="{ backgroundColor: stat.color }">
              <el-icon><component :is="stat.icon" /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">{{ stat.title }}</div>
              <div class="stat-value">{{ stat.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统状态 -->
    <el-row :gutter="20" class="system-status">
      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="status-card">
          <template #header>
            <div class="card-header">
              <span>资源使用率</span>
              <el-button type="text">详情</el-button>
            </div>
          </template>
          <!-- 这里可以放资源使用率图表 -->
          <div class="chart-placeholder">资源使用率图表</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="status-card">
          <template #header>
            <div class="card-header">
              <span>告警统计</span>
              <el-button type="text">详情</el-button>
            </div>
          </template>
          <!-- 这里可以放告警统计图表 -->
          <div class="chart-placeholder">告警统计图表</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-row>
      <el-col :span="24">
        <el-card class="recent-activities">
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
              <el-button type="text">查看更多</el-button>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="activity in recentActivities"
              :key="activity.id"
              :timestamp="activity.time"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">

// 统计数据
const statistics = [
  {
    title: '服务器总数',
    value: '128',
    icon: 'Monitor',
    color: '#409EFF',
  },
  {
    title: '在线终端',
    value: '32',
    icon: 'Terminal',
    color: '#67C23A',
  },
  {
    title: '活动任务',
    value: '15',
    icon: 'Connection',
    color: '#E6A23C',
  },
  {
    title: '告警数量',
    value: '3',
    icon: 'Warning',
    color: '#F56C6C',
  },
]

// 最近活动
const recentActivities = [
  {
    id: 1,
    content: '服务器 server-01 CPU 使用率超过阈值',
    time: '2024-01-18 10:30:00',
    type: 'warning',
  },
  {
    id: 2,
    content: '新增服务器 server-02',
    time: '2024-01-18 09:15:00',
    type: 'success',
  },
  {
    id: 3,
    content: '执行定时备份任务',
    time: '2024-01-18 08:00:00',
    type: 'info',
  },
]
</script>

<style scoped lang="scss">
.home-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;

  .statistics {
    margin-bottom: 20px;

    .stat-item {
      display: flex;
      align-items: center;
      gap: 16px;
      min-height: 100px;

      .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 24px;
      }

      .stat-info {
        flex: 1;
        .stat-title {
          font-size: 14px;
          color: #909399;
        }

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
          margin-top: 4px;
        }
      }
    }
  }

  .system-status {
    margin-bottom: 20px;

    .chart-placeholder {
      min-height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f7fa;
      color: #909399;
    }

    .el-card {
      margin-bottom: 20px;
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  // 响应式布局调整
  @media (max-width: 768px) {
    padding: 0 10px;

    .statistics {
      .stat-item {
        min-height: 80px;
      }
    }

    .system-status {
      .chart-placeholder {
        min-height: 200px;
      }
    }
  }

  @media (min-width: 1920px) {
    max-width: 1800px;
  }
}
</style>
